<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>3D骰子模拟器</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 启用 WebApp 全屏模式 -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- SVG for modern browsers -->
    <link rel="icon" href="icon.svg" type="image/svg+xml">
	<!-- iOS Safari 会读取 Apple Touch Icon（会自动加圆角和高光）-->
	<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
	<link rel="stylesheet" href="styles.min.css">
</head>
<body onclick="handleBodyClick(event)">
	<noscript>
	<p>要使用本网站，请启用JavaScript!</p>
	</noscript>
    <h1 id="mainTitle">3D骰子模拟器</h1>
    <button  id="rollButton" onclick="rollDice()">掷骰子</button>
	<p id="requestDeviceMotionPermission">需要授权才能启用“摇一摇”，<a href="#" onclick="requestDeviceMotionPermission()">点我授权</a></p>
    <div class="dice-container" id="diceContainer"></div>

    <div class="fullscreen-btn" id="fullscreenBtn" onclick="toggleFullScreen()">
        <svg id="fullscreenIcon" viewBox="0 0 1024 1024" fill="#4CAF50" >
            <path id="enterFullscreen" d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z"/>
            <path id="exitFullscreen" d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z"/>
        </svg>
    </div>
    
    <div class="menu-btn" id="mainMenu" onclick="toggleMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="menu-container" id="menuContainer">
        <h1>设置</h1>
        <div class="controls">
            <div class="control-row">
                <div class="input-group">
                    <label for="diceCount">骰子数量</label>
                    <div class="number-wrapper">
                        <button class="number-btn minus" onclick="adjustNumber('diceCount', -1)">-</button>
                        <input type="number" id="diceCount" min="1" max="20" value="2">
                        <button class="number-btn plus" onclick="adjustNumber('diceCount', 1)">+</button>
                    </div>
                </div>
                <div class="input-group">
                    <label for="repeatCount">连续投掷</label>
                    <div class="number-wrapper">
                        <button class="number-btn minus" onclick="adjustNumber('repeatCount', -1)">-</button>
                        <input type="number" id="repeatCount" min="1" max="20" value="1">
                        <button class="number-btn plus" onclick="adjustNumber('repeatCount', 1)">+</button>
                    </div>
                </div>
            </div>
            <div class="control-row">
                <div class="input-group">
                    <label for="diceSize">骰子大小</label>
                    <div class="dice-size-wrapper">
                        <input type="range" id="diceSize" min="50" max="300" value="200">
                        <span id="diceSizeValue" contenteditable="true">200</span>%
                    </div>
                </div>
            </div>
            <div class="control-row">
                <div class="switch-container">
                    <div class="switch-wrapper">
                         <span class="switch-label">显示数字</span>
                        <label class="switch">
                            <input type="checkbox" id="showNumberSwitch">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="switch-wrapper">
                        <span class="switch-label">投掷音效</span>
                        <label class="switch">
                            <input type="checkbox" id="soundSwitch" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="switch-wrapper">
                        <span class="switch-label">震动反馈</span>
                        <label class="switch">
                            <input type="checkbox" id="vibrationSwitch" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="switch-wrapper" id="shakeSwitchWrapper">
                        <span class="switch-label" title="连续点击5次修改灵敏度阈值" style="cursor: pointer;">摇一摇</span>
                        <label class="switch">
                            <input type="checkbox" id="shakeSwitch">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="switch-wrapper">
                         <span class="switch-label">记录历史</span>
                        <label class="switch">
                            <input type="checkbox" id="historySwitch" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    <!-- debug开关 -->
                    <div class="switch-wrapper" id="debugSwitchWrapper">
                        <span class="switch-label">调试模式</span>
                        <label class="switch">
                            <input type="checkbox" id="debugSwitch">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="about-section">
            <p id="about" title="连续点击5次进入调试模式">写麻蒋老是没子骰†，干脆己自打一個</p>
            <a title="发送邮件" href="mailto:leftshine@foxmail.com">leftshine@foxmail.com</a>
        </div>
    </div>
    
    <input type="range" id="diceSizeFloating" min="50" max="300" value="200">
    <div id="floatingSliderValue" class="slider-value">200%</div>
    
    <div class="stats" id="history">
        <h2 id="historyHeader" >
            <span>投掷结果：<span id="total">0</span></span>
            <svg class="history-icon" viewBox="0 0 24 24" onclick="toggleHistory(event)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="2 14 12 18 22 14"></polyline>
            </svg>
            <span class="history-right-group">
                <span class="throw-count" >已投掷:<span id="historyCount">0次</span></span>
                <a href="#" class="clear-history" id="clear-history" >清空</a>
            </span>
        </h2>
        <div id="historyList"></div>
    </div>
<script src="script.min.js" defer></script>
</body>
</html>
